<template>
    <div class="photo-container">
        <h3>{{photoinfo.title}}</h3>
        <p class="subtitle">
            <span>发表时间 : {{photoinfo.add_time | dataFormat}}</span>
            <span>点击次数 : {{ photoinfo.click }} 次</span>
        </p>
        <hr>

        <!-- 缩略图区域 -->
        <div class="thumbs">
            <img class="preview-img" v-for="(item, index) in list" :src="item.src" height="100" @click="$preview.open(index, list)" :key="item.src">
        </div>
        <!-- 图片内容区域 -->
        <div class="content">{{photoinfo.content}}</div>

        <!-- 放置一个现成的评论子组件 -->
        <cmt-box :id="id"></cmt-box>
    </div>
</template>

<script>
// 1. 导入评论子组件
import comment from "../subcomponents/comment.vue";

export default {
  data() {
    return {
      id: this.$route.params.id, // 从路由中获取到的图片 id
      photoinfo: {
        // 图片详情
        title: "仙路尽头谁为峰，一见无始道成空",
        content:
          "我们是别人故事里的殇，如那凋落的叶，随风飘零，找不到方向。大帝路上，有我们的足迹，却不在天堂，只是那一抹凄艳的红，诉说着血的哀凉。马踏星空，伟岸的身，惊艳的战，射下神月，打破万古神话，筑一曲帝路辉煌，成为绝唱。那是别人的荣光。彷徨，迷惘，我们在何方，挣扎，寻访，帝路上一堆白骨注释了我们的凄凉。",
          click: 0
      },
      list: [
        // 缩略图的数组
        {
          src: require("../../images/photolist01.jpg"),
          w: 360,
          h: 360
        },
        {
          src: require("../../images/photolist02.jpg"),
          w: 360,
          h: 360
        },
        {
          src: require("../../images/photolist03.jpg"),
          w: 360,
          h: 360
        },
        {
          src: require("../../images/photolist04.jpg"),
          w: 360,
          h: 360
        },
        {
          src: require("../../images/photolist05.jpg"),
          w: 360,
          h: 360
        },
        {
          src: require("../../images/photolist06.jpg"),
          w: 360,
          h: 360
        }
      ]
    };
  },
  created() {
    this.getPhotoInfo();
    this.getThumbs();
  },
  methods: {
    getPhotoInfo() {
      //   // 获取图片的详情
      //   this.$http.get("api/getimageInfo/" + this.id).then(result => {
      //     if (result.body.status === 0) {
      //       this.photoinfo = result.body.message[0];
      //     }
      //   });
    },
    getThumbs() {
      //   // 获取缩略图
      //   this.$http.get("api/getthumimages/" + this.id).then(result => {
      //     if (result.body.status === 0) {
      //       // 循环每个图片数据，补全图片的宽和高
      //       result.body.message.forEach(item => {
      //         item.w = 600;
      //         item.h = 400;
      //       });
      //       // 把完整的数据保存到 list 中
      //       this.list = result.body.message;
      //     }
      //   });
    }
  },
  components: {
    // 注册评论子组件
    "cmt-box": comment
  }
};
</script>

<style lang="scss" scoped>
.photo-container {
  padding: 3px;
  h3 {
    color: #26a2ff;
    font-size: 15px;
    text-align: center;
    margin: 15px 0;
  }
  .subtitle {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
  }
  .content {
    font-size: 13px;
    line-height: 20px;
    margin-bottom: 10px;
  }
  .thumbs {
    img {
      margin: 10px;
      box-shadow: 0 0 8px #999;
    }
  }
}
</style>

